<template>
	<div>
		<scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower()">
			<view v-for="(item,index) in accountList" :key="index" style="display: flex;flex-direction: column;padding: 10px;background-color: #ffffff;border-bottom: 1px solid #ededed;">
				<view style="display: flex;align-items: center;width: 100%;">
					<view
						style="width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;background-color: #ffeadb;border-radius: 50%;">
						{{item.userName?item.userName.slice(0,1):''}}
					</view>
					<view class="round">
						<view style="display: flex;justify-content: space-between;">
							<span>
								<text>{{item.userName}}</text>
								<text style="margin-left: 10px;">{{item.dept.deptName}}</text>
							</span>
							<span style="color: #a5a5a5;font-size: 12px;">
								创建时间：{{item.createTime}}
							</span>
						</view>
						<view style="color: #a5a5a5;font-size: 14px;margin-top: 5px;">{{item.phonenumber}}</view>
						<view style="display: flex;justify-content: space-between;margin-top: 5px;">
							<span>{{item.roles.map(i=>i.roleName).join('、')}}</span>
							<text v-if="item.status=='0'" style="display: inline;color: rgb(0, 153, 255);">启用</text>
							<text  v-else style="display: inline;color:brown;">停用</text>
						</view>
						<view style="margin-top: 5px;">
							<text>{{item.posts.map(i=>i.postName).join('、')?'【'+item.posts.map(i=>i.postName).join('、')+'】':''}}</text>
						</view>
					</view>
				</view>
				
				<view style="display: flex;justify-content: flex-end;margin-top: 10px;">
					<view @click="resetPassword(item)" hover-class="buttonHover" style="margin-right: 10px;width: 60px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">重置密码</view>
					<view v-if="item.status=='0'" @click="banAccount(item)" hover-class="buttonHover" style="margin-right: 10px;width: 40px;text-align: center;border: 1rpx solid rgb(129, 129, 129);color:rgb(129, 129, 129);border-radius: 8px;font-size: 12px;">停用</view>
					<view v-else @click="enableAccount(item)" hover-class="buttonHover" style="margin-right: 10px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">启用</view>
					<view @click="editAccount(item.userId)" hover-class="buttonHover" style="margin-right: 10px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">编辑</view>
					<view @click="deleteAccount(item.userId)" hover-class="buttonHover" style="width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">删除</view>
				</view>
			</view>
			<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower()"></uni-load-more>
			<view style="height: 100px;"></view>
		</scroll-view>
		<view @click="addAccount" hover-class="buttonHover" style="position: fixed;right: 15px;bottom:50px;width: 50px;height:50px;color:#ffffff;background-color:#bf5f09;border-radius: 50%;display:flex;justify-content: center;align-items: center;box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.3);">
			<uni-icons type="plusempty" size="30" color="#ffffff"></uni-icons>
		</view>
		<!-- 账号启用停用提示窗 -->
		<uni-popup ref="accountEnableDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" :confirmText="'确认'+(enableAccountFlag?'启用':'停用')" :title="(enableAccountFlag?'启用':'禁用')+'该账号？'"
				@confirm="accountEnableConfirm">
				<view :style="{'display': 'flex','color': (enableAccountFlag?'#bf5f09':'rgb(129, 129, 129)')}">
					<text>*确认{{enableAccountFlag?'启用':'停用'}}当前用户-{{enableAccountVo.userName}}的账号？*</text>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 账号重设密码提示窗 -->
		<uni-popup ref="resetPWDDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" :title="'重置用户'+resetPwdAccount.userName+'密码'"
				@confirm="resetPWDDialogConfirm" :before-close="true" @close="closeDialog('resetPWDDialog')">
					<uni-forms ref="form_resetAccountPWD" :modelValue="formData_resetAccountPWD" :rules="rules_resetAccountPWD" labelWidth="75px">
						<uni-forms-item label="新密码" required name="passwd">
							<uni-easyinput type="password" v-model="formData_resetAccountPWD.passwd" placeholder="请输入新密码" />
						</uni-forms-item>
						<uni-forms-item label="再次输入" required name="confirePwd">
							<uni-easyinput type="password" v-model="formData_resetAccountPWD.confirePwd" placeholder="请再次输入密码" />
						</uni-forms-item>
					</uni-forms>
			</uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script>
	import {resetPwd} from '@/api/login.js'
	import {getAccountList,deleteAccount, updateAccountProfile} from '@/api/system/account.js'
	export default {
		data() {
			return {
				accountList:[],
				scrollH: 700,
				//上拉触底节流标识
				flag:true,
				//加载更多
				loadMoreStatus:'more',
				pageNum:10,
				//启用账号标识
				enableAccountFlag:true,
				//当前启用、禁用账号对象
				enableAccountVo:{},
				//当前重设密码用户对象
				resetPwdAccount:{},
				formData_resetAccountPWD:{
					dept:'',
					passwd:'',
					confirePwd:'' //二次密码
				},
				// 校验规则->重设密码
				rules_resetAccountPWD: {
					passwd: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空',
						}]
					},
					confirePwd: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空',
						}]
					},
				},
				
			}
		},
		beforeCreate() {
			uni.showLoading({
				title: '正在加载',
			})
		},
		onLoad(e) {
		    uni.getSystemInfo({
		        success: res => {
		            this.scrollH = res.windowHeight;
		        }
		    });
		},
		created() {
			this.getAccountList()
		},
		methods: {
			//接受提交后跳转的顶部导航栏位置
			otherFun() {
				this.getAccountList()
			},
			// 触底的时候请求数据，即为上拉加载更多
			scrolltolower(name){
				this.loadMoreStatus='loading'
				if(this.flag){
				    setTimeout(()=>{
						this.pageNum+=10;
						this.getAccountList()
				        this.flag = true;
				    },1000);
				}
				this.flag = false;
			},
			async getAccountList(){
				getAccountList({pageNum:1,pageSize:this.pageNum}).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.accountList = res.rows
						this.loadMoreStatus=res.rows.length===this.pageNum?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}	
				})
			},
			//手动关闭dialog
			closeDialog(type){
				this.$refs[type].close()
			},
			//重设账号密码
			resetPassword(item){
				this.formData_resetAccountPWD.dept=''
				this.formData_resetAccountPWD.passwd=''
				this.formData_resetAccountPWD.confirePwd=''
				this.resetPwdAccount=item
				this.$refs.resetPWDDialog.open()
			},
			//确认重置密码
			resetPWDDialogConfirm(){
				this.$refs.form_resetAccountPWD.validate().then(res => {
					if(this.formData_resetAccountPWD.passwd!==this.formData_resetAccountPWD.confirePwd)
					{
						uni.showToast({
							icon: 'none',
							title: '密码输入不一致'
						})
						return
					}
					uni.showLoading({
						title: '正在修改...',
					})
					this.formData_resetAccountPWD.dept=this.resetPwdAccount.deptId;
					resetPwd(this.resetPwdAccount.phonenumber,this.formData_resetAccountPWD).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							//重新加载账号列表
							this.getAccountList()
							this.$refs.resetPWDDialog.close()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}	
					})
				}).catch(err => {
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				})
			},
			//启用账号
			enableAccount(item){
				this.enableAccountFlag=true
				this.enableAccountVo=item
				this.$refs.accountEnableDialog.open()
			},
			//禁用账号
			banAccount(item){
				this.enableAccountFlag=false
				this.enableAccountVo=item
				this.$refs.accountEnableDialog.open()
			},
			//确认启用、禁用
			accountEnableConfirm(){
				uni.showLoading({
					title: '正在'+(this.enableAccountFlag?'启用':'停用')+'...'
				})
				this.enableAccountVo.status=this.enableAccountFlag?'0':'1'
				updateAccountProfile(this.enableAccountVo).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						uni.showToast({
							title: (this.enableAccountFlag?'启用':'停用')+'成功',
							icon: 'none'
						})
						//重新加载账号列表
						this.getAccountList()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}	
				})
			},
			//编辑账号
			editAccount(userId){
				uni.navigateTo({
					url: '/pages-mine/mine/addAccount?userId=' + userId
				})
			},
			//删除账号
			deleteAccount(userId){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定删除此用户吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在删除...',
							})
							deleteAccount(userId).then(res2 => {
								uni.hideLoading()
								if (res2.code == '200') {
									uni.showToast({
										icon: 'none',
										title: '删除成功'
									})
									//重新加载客户列表
									that.getAccountList()
								} else {
									uni.showToast({
										icon: 'none',
										title: res2.msg
									})
								}
							})
				
						}
					}
				});
			},
			//创建账号
			addAccount() {
				uni.navigateTo({
					url:'/pages-mine/mine/addAccount'
				})
			}
		},
	}
</script>

<style scoped>
.buttonHover{
	opacity: 0.6;
}
::v-deep .uni-border-left{
	    border-left-color: #f0f0f0;
	    border-left-style: solid;
	    border-left-width: 1px;
	    background-color: rgb(157,81,38);
	    border-radius: 0 0 11px 0;
	    /* color: white; */
	}
	::v-deep .uni-button-color{
	    color: #ffffff;
	}
	.round {
		margin-left: 10px;
		width: calc(100% - 50px);
	}
</style>